<%--
  Created by IntelliJ IDEA.
  User: 95126
  Date: 2021/4/29
  Time: 8:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="../imgs/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../imgs/css/bootstrap.min.css">
    <link rel="stylesheet" href="../imgs/css/all.min.css">
    <link rel="stylesheet" href="../imgs/css/animate.css">
    <link rel="stylesheet" href="../imgs/css/flaticon.css">
    <link rel="stylesheet" href="../imgs/css/magnific-popup.css">
    <link rel="stylesheet" href="../imgs/css/odometer.css">
    <link rel="stylesheet" href="../imgs/css/owl.carousel.min.css">
    <link rel="stylesheet" href="../imgs/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="../imgs/css/nice-select.css">
    <link rel="stylesheet" href="../imgs/css/main.css">

    <link rel="shortcut icon" href="../imgs/images/favicon.png" type="image/x-icon">
    <title>新用户注册</title>
    <style>

    </style>
</head>

<body>
<!-- ==========Preloader========== -->
<div class="preloader">
    <div class="preloader-inner">
        <div class="preloader-icon">
            <span></span>
            <span></span>
        </div>
    </div>
</div>
<!-- ==========Preloader========== -->

<!-- ==========Sign-In-Section========== -->
<section class="account-section bg_img" data-background="../imgs/images/account/account-bg.jpg">
    <div class="container">
        <div class="padding-top padding-bottom">
            <div class="account-area">
                <div class="section-header-3">
                    <span class="cate">欢迎</span>
                    <h2 class="title">来到博莱特 </h2>
                </div>
                <form class="account-form">
                    <div class="form-group">
                        <label for="phone">手机号<span>*</span></label>
                        <input type="tel" placeholder="请输入您的手机号" id="phone" onblur="check_phone()" name="phone"/>
                        <span id="p_error"></span>
                    </div>
                    <div class="form-group">
                        <label for="pwd">密码<span>*</span></label>
                        <input type="password" placeholder="请输入密码,密码长度至少为6位" id="pwd" name="password" onblur="checkPwd()">
                        <span id="pwd_error"></span>
                    </div>
                    <div class="form-group">
                        <label for="ccode">验证码<span>*</span></label><br>
                        <input type="text" placeholder="请您输入验证码" id="ccode" style="width: 55%" name="code" />
                        <button type="button" id="getCheckCode" class="btn btn-primary" style="width: 40%">获取验证码</button><br>
                        <span id="code_error"></span>
                    </div>
                    <div class="form-group checkgroup">
                        <input type="checkbox" id="bal" required checked>
                        <label for="bal">我同意 <a href="#0">条款,隐私政策</a> 和 <a href="#0">费用</a></label>
                    </div>
                    <div class="form-group text-center">
                        <button type="button" class="btn btn-danger" id="reg_btn" onclick="register()">注册</button>
                    </div>
                </form>
                <div class="option">
                    已经有账户了? <a href="${path}/user/toLogin">登录</a>
                </div>

<%--                <div class="or"><span>其他登录方式</span></div>--%>
<%--                <ul class="social-icons">--%>
<%--                    <li>--%>
<%--                        <a href="#0">--%>
<%--                            <i class="fab fa-facebook-f"></i>--%>
<%--                        </a>--%>
<%--                    </li>--%>
<%--                    <li>--%>
<%--                        <a href="#0" class="active">--%>
<%--                            <i class="fab fa-twitter"></i>--%>
<%--                        </a>--%>
<%--                    </li>--%>
<%--                    <li>--%>
<%--                        <a href="#0">--%>
<%--                            <i class="fab fa-google"></i>--%>
<%--                        </a>--%>
<%--                    </li>--%>
<%--                </ul>--%>
            </div>
        </div>
    </div>
</section>
<!-- ==========Sign-In-Section========== -->


<script src="../imgs/js/jquery-3.3.1.min.js"></script>
<script src="../imgs/js/modernizr-3.6.0.min.js"></script>
<script src="../imgs/js/plugins.js"></script>
<script src="../imgs/js/bootstrap.min.js"></script>
<script src="../imgs/js/isotope.pkgd.min.js"></script>
<script src="../imgs/js/magnific-popup.min.js"></script>
<script src="../imgs/js/owl.carousel.min.js"></script>
<script src="../imgs/js/wow.min.js"></script>
<script src="../imgs/js/countdown.min.js"></script>
<script src="../imgs/js/odometer.min.js"></script>
<script src="../imgs/js/viewport.jquery.js"></script>
<script src="../imgs/js/nice-select.js"></script>
<script src="../imgs/js/main.js"></script>
<script src="../imgs/plugins/layui/layui.js"></script>
<script>
    //校验手机号
    function check_phone(){
        let phone = $("#phone").val();
        let $phone = $("#p_error");
        if(!(/^1[3456789]\d{9}$/.test(phone))){
            $phone.addClass("text-danger").text("× 手机号码不合法，请重新输入");
            return false;
        }else{
            //验证手机号是否已被注册
            $.post('${path}/user/isExistPhone',{"phone":phone},function (data){
                if(data.code == "200"){  //未被注册
                    $phone.removeClass("text-danger").text("");
                    return true;
                }else {
                    $phone.addClass("text-danger").text("× 该手机号码已被注册，请重新输入");
                    return false;
                }
            })
        }
        return true;
    }

    //校验密码
    function checkPwd(){
        let pwd = $("#pwd").val();
        let $pwd = $("#pwd_error");
        if(null == pwd||pwd.trim().length==0){
            $pwd.addClass("text-danger").text("× 密码不能为空，请重新输入");
            return false;
        }else if(pwd.length<6){
            $pwd.addClass("text-danger").text("× 密码长度至少为6位，请重新输入");
            return false;
        }else {
            $pwd.removeClass("text-danger").text("");
            return true;
        }
    }

    //校验验证码是否为空
    function check_code(){
        let code = $("#ccode").val();
        let $code = $("#code_error");
        if(null == code||code.length==0){
            $code.addClass("text-danger").text("× 验证码不能为空，请重新输入");
            return false;
        }else {
            $code.removeClass("text-danger").text("");
            return true;
        }
    }


    //设置验证码倒计时60s
    let time = 60,t;
    function set_time(obj){
        if(time == 0) {
            obj.removeAttribute("disabled");
            obj.innerText="获取验证码";
            clearTimeout(t);
        }else{
            obj.setAttribute("disabled",true);
            obj.innerText = "重新发送(" + time + "s)";
            time--;
        }
        t = setTimeout(function() {
            set_time(obj)
        },1000)
    }

    //发送验证码按钮
    $("#getCheckCode").click(function (){
        let phone = $("#phone").val();
        if(!check_phone()||!checkPwd()){
            return false;
        }else {
            $.post("${path}/user/sendCode", {"phone":phone},function (data){

            })
            set_time(this);
        }
    })

    $("#bal").click(function (){
        //未勾中复选框
        if(!$("#bal").prop("checked")){
            $("#reg_btn").attr("disabled",true);
        }else {
            $("#reg_btn").attr("disabled",false);
        }
    })
    //注册
    function register(){
        //表单验证失败
        if(!check_phone()||!checkPwd()||!check_code()){
            return false;
        }
        let phone = $("#phone").val();
        let password = $("#pwd").val();
        let code = $("#ccode").val();
        $.ajax({
            url:"${path}/user/registerUser",
            type:'post',
            data:{"phone":phone,"password":password,"code":code},
            dataType:'json',

            success:function(data) {
                if(data.code == "200"){
                    $("#code_error").removeClass("text-danger").text("");
                    layui.use('layer', function(){
                        let layer = layui.layer;
                        layer.msg('<span style="font-weight:bold;color: black">注册成功！欢迎加入电影王国,即将跳转登录入口...</span>', {icon:1,time: 1000 },function (){
                            window.location = "${path}/user/toLogin";
                        });
                    });
                }else if (data.code == "404"){
                    $("#code_error").addClass("text-danger").text("验证码失效");
                }else if(data.code == "500"){
                    $("#code_error").addClass("text-danger").text("验证码错误");
                }
            }
        });
    }



</script>
</body>

</html>
